<template>
  <h1 v-text="slogan"></h1>
  <h2>直播播报：<span v-text="result"></span></h2>
  <h2>
    中国队进球数：
    <span v-text="team.china"></span>
    &nbsp;&nbsp;&nbsp;&nbsp;<button @click="team.china++">点击中国队进一球</button>
  </h2>
  <h2>
    韩国队进球数：
    <span v-text="team.korea"></span>
    &nbsp;&nbsp;&nbsp;&nbsp;<button @click="team.korea++">点击韩国队进一球</button>
  </h2>
</template>

<script>
import {computed, reactive, ref} from "vue";

export default {
  name: "LhzC",
  setup() {
    const slogan = ref('桃李不言下自成蹊');
    const team = reactive({
      china: 0,
      korea: 0
    });
    const result = ref(computed(function () {
      if (team.china > team.korea) {
        return '中国队领先';
      } else if (team.china < team.korea) {
        return '韩国队领先';
      } else {
        return '势均力敌';
      }
    }));
    return {
      slogan, result, team
    }
  }
}
</script>

<style scoped>

</style>